/* ==================== 全局样式 ==================== */
* {
  box-sizing: border-box; /* 所有元素的宽高包含 padding 和 border */
}
html,
body,
.page {
  margin: 0; /* 去掉浏览器默认外边距 */
  height: 100%; /* 页面或容器高度占满屏幕 */
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
    Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; /* 系统字体优先，保证跨平台一致性 */
}
.page {
  display: flex; /* 整体使用 Flex 布局 */
  flex-direction: column; /* 主轴垂直排列 */
  background-color: #eee; /* 页面灰色背景 */
  max-width: 400px; /* 最大宽度限制，适合移动端 */
  margin: auto; /* 页面水平居中 */
}

/* ==================== 顶部导航栏 ==================== */
.top {
  position: relative; /* 方便子元素绝对定位 */
  z-index: 1; /* 顶部层级 */
  width: 100%; /* 占满父容器宽度 */
  background-color: #d23e34; /* 红色背景 */
  padding-top: 15px; /* 顶部内边距 */
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2); /* 底部阴影 */
}
.top-title {
  text-align: center; /* 标题文字水平居中 */
  font-size: 16px; /* 标题字号 */
  color: #fff; /* 白色字体 */
}

/* ==================== 顶部 Tabs 标签栏 ==================== */
.tabs {
  padding: 8px; /* 标签栏内边距 */
}
.tabs > ul {
  margin: 0; /* 去掉 ul 默认外边距 */
  display: flex; /* 横向排列子 li */
  border-radius: 10px; /* 圆角 */
  background-color: #cd2523; /* 背景红色 */
  overflow: hidden; /* 子元素溢出隐藏 */
  padding: 0; /* 去掉默认内边距 */
}
.tab-item {
  flex: 1; /* 所有 tab 平分宽度 */
  display: flex; /* 内部 Flex 布局 */
  justify-content: center; /* 水平居中图标和文字 */
  align-items: center; /* 垂直居中图标和文字 */
  line-height: 34px; /* 高度对齐 */
  color: #fff; /* 字体白色 */
  font-size: 14px; /* 字体大小 */
  cursor: pointer; /* 鼠标悬停显示手型 */
  list-style: none; /* 去掉 li 默认圆点 */
}
.tab-active {
  background-color: #b9211f; /* 选中状态背景更深红色 */
}
.icon {
  width: 20px; /* 图标固定宽度 */
  height: 20px; /* 图标固定高度 */
  object-fit: contain; /* 保持比例缩放，不变形 */
}

/* ==================== 分类导航条 ==================== */
.cats {
  padding: 8px; /* 内边距 */
  border-radius: 10px 10px 0 0; /* 上圆角 */
  background-color: #fff; /* 白色背景 */
}
.cat-list {
  display: flex; /* 横向排列分类 li */
  overflow-x: auto; /* 超出可横向滚动 */
  padding: 0; /* 去掉内边距 */
  margin: 0; /* 去掉外边距 */
}
.cat-list::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.cat-item {
  line-height: 25px; /* 高度对齐 */
  background-color: #f7f7f7; /* 灰色背景 */
  font-size: 14px; /* 字号 */
  color: #333; /* 字体颜色 */
  padding: 0 12px; /* 左右内边距 */
  border-radius: 5px; /* 圆角 */
  margin-right: 10px; /* 分类间距 */
  white-space: nowrap; /* 不换行 */
  list-style: none; /* 去掉 li 默认圆点 */
}
.cat-active {
  background-color: #d23e34; /* 当前选中分类红色背景 */
  color: #fff; /* 字体白色 */
}

/* ==================== 列表区域 ==================== */
.list {
  position: relative; /* 相对定位方便子元素布局 */
  width: 100%; /* 宽度占满父容器 */
  flex: 1; /* 占满剩余空间 */
  overflow: auto; /* 超出可滚动 */
  padding: 15px; /* 内边距 */
}
.sku {
  display: block; /* 块级显示 */
  text-decoration: none; /* 去掉链接下划线 */
  padding: 15px; /* 内边距 */
  border-radius: 20px; /* 圆角 */
  background-color: #fff; /* 白色背景 */
  margin-bottom: 15px; /* 商品间距 */
}
.sku:last-child {
  margin-bottom: 0; /* 最后一个商品去掉下边距 */
}

/* ==================== 资讯内容布局 ==================== */
.content {
  display: flex; /* 左图右信息 */
  width: 100%; /* 宽度占满 */
}
.cover {
  flex: 1; /* 左侧图片占比 */
  position: relative; /* 子元素绝对定位参考 */
  border-radius: 5px; /* 圆角 */
  overflow: hidden; /* 超出隐藏 */
}
.cover-img {
  width: 100%; /* 宽度填满父容器 */
  height: auto; /* 高度按比例缩放 */
  display: block; /* 块级显示 */
}
.cover-rank {
  position: absolute; /* 排名图标绝对定位 */
  width: 36px; /* 宽度固定 */
  left: 0; /* 左上角位置 */
  top: 0;
}
.info {
  display: flex; /* 内部 Flex */
  flex-direction: column; /* 垂直排列 */
  justify-content: space-between; /* 上下空间分配 */
  flex: 1; /* 占满剩余空间 */
  height: 60px; /* 高度固定 */
  margin-left: 1px; /* 左间距微调 */
}
.sku-title {
  color: #333; /* 字体颜色 */
  font-size: 14px; /* 字号 */
  font-weight: 600; /* 加粗 */
  line-height: 1.5em; /* 行高 */
  overflow: hidden; /* 超出隐藏 */
  text-overflow: ellipsis; /* 多余文本显示省略号 */
  display: -webkit-box; /* 支持多行省略号 */
  -webkit-box-orient: vertical;
}

/* ==================== 资讯描述区域 ==================== */
.desc {
  display: flex; /* 横向排列图标和文字 */
  align-items: center; /* 垂直居中 */
  font-size: 12px; /* 字号 */
  color: #999; /* 灰色文字 */
}
.icon-small {
  width: 18px; /* 小图标宽度 */
  height: 18px; /* 小图标高度 */
  object-fit: contain; /* 保持比例 */
}
.source {
  flex: 1; /* 左侧来源文字占满剩余空间 */
}
.desc-number {
  margin-left: 5px; /* 数字和图标间距 */
}
.desc .iconfont {
  margin-left: 0px; /* font icon 左间距为 0 */
}
.desc .icon-comment {
  margin-left: 0; /* 评论图标左间距为 0 */
}
